<template>
	<view class="Column" style="height: 100%; background-color: F7F7F7;">
		<view style="height: 300upx;width: 100%; background-color: #61B992;" mode=""></view>

		<!-- 用户详细区 -->
		<view class="Fixed Column" style="">
			<!-- 头像以及信息编辑 -->
			<view class="Row width100" style="flex: 1;  margin-top: 20upx;justify-content: space-between;">
				<view class="Row ">
					<view class="Column Center" style="width: 120upx;height: 120upx;margin-left: 30upx;border-radius: 50%;background-color: #0ac6ff;">
						<image :src="headicon" style="width: 70upx;height: 70upx;border-radius: 50%;" @error="imgError" @click="OnLoingClick()"></image>
					</view>
					<view class="Column" style="margin-left: 30upx;justify-content: space-between;" @click="OnLoingClick()">
						<text style="font-size: 25upx; color: #FFFFFF;font-weight: bold;">{{ ice }}</text>
						<view class="Row width100" style="align-items: center;margin-top: 20upx;">
							<text style="font-size: 40upx;color: #FFFFFF;">{{ levelName }}</text>
							<image src="../../static/near/gou.png" style="width: 100upx;height: 30upx;margin-left: 20upx;"></image>
						</view>
						<text style="font-size: 25upx; color: #FFFFFF;font-weight: bold;margin-top: 5upx;">{{ levelValue }}成长值</text>
					</view>
				</view>
			</view>
			<view class="Column   width100" style=" flex: 0.8; padding-bottom: 20upx; margin-top: 15upx;font-size: 25upx;background-color: #FFFFFF;padding: 8upx;">
				<text class="f-size" style="margin-left: 20upx;color: #979797;font-weight: bold">{{ levelValue }}/{{ levelTargetValue }}</text>
				<view class="uni-padding-wrap uni-common-mt width100" style="margin-top: 10upx; ">
					<view class="progress-box" style="margin-left: 10upx;margin-right: 10upx;"><progress percent="40" active stroke-width="4" activeColor="#90DCA9" /></view>
				</view>
				<view class="Row width100 margin10 m-top10">
					<image src="../../static/near/gou.png" style="width: 100upx;height: 30upx;margin-left: 7upx;"></image>
					<view class="Flex1"></view>
					<image src="../../static/near/gou.png" style="width: 100upx;height: 30upx;margin-right: 20upx;"></image>
				</view>
				<view class="Row margin10 m-top10">
					<text class="width100 m-top10" style="text-align: center;font-weight: bold;">在获取{{ levelTargetValue - levelValue }}分成为二级会员</text>
				</view>
			</view>
		</view>

		<view class="width100" style="height: 100upx; background-color: #F7F7F7;"></view>

		<view class="Column width100 m-top30" style="line-height: 70upx;" >
			<view class="Row margin30">
				<view class="Flex1 "><text style="font-size: 30upx; font-weight:bold ;">会员福利</text></view>

				<view class="Flex1 Row " style="padding-top: 6upx;">
					<view class="Flex1"></view>
					<text class="f-size">已领取福利</text>
					<image src="../../static/homepage/back.png" style="width: 30upx; height: 30upx;"></image>
				</view>
			</view>
			<view class="margin30 m-top30" style="height: 1upx; background-color: #DBDBDB;"></view>
		</view>


		<view class="Column  margin30" style="line-height: 70upx;" v-for="(item, index) in welfareData" :key="item">
			<text class="f-size" style="color: #828282; font-weight: bold;">{{ item.title }}</text>

			<view class="width100 m-top30" style="height: 1upx; background-color: #DBDBDB;"></view>
		</view>

		<text class="f-size width100" style="line-height: 70upx; color: #828282; font-weight: bold;text-align: center;">其他福利敬请期待...</text>

		<view class="Flex1" style="background:#F7F7F7 ;"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ice: '周嬷嬷',
			levelName: '青铜会员',
			levelValue: 34,
			levelTargetValue: 100,
			welfareData: [
				{
					title: '青铜会员满一百减十块'
				},
				{
					title: '青铜会员满五百减五十块'
				},
				{
					title: '青铜会员满一千减一百十块'
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
page {
	height: 100%;
	width: 100%;
}
.f-size {
	font-size: 25upx;
}

.m-top10 {
	margin-top: 10;
}

.m-top20 {
	margin-top: 20;
}
.m-top30 {
	margin-top: 30;
}
.m-top40 {
	margin-top: 40;
}
.Fixed {
	width: 94%;
	height: 350upx;
	position: fixed;
	left: 3%;
	top: 1.5%;
	background-color: #90dca9;
}

.FixedSetting {
	width: 90%;
	height: 100upx;
	position: fixed;
	left: 5%;
	top: 7%;
	background-color: rgba(0, 0, 0, 0);
	align-items: center;
	justify-content: space-between;
}
.editorinfo {
	height: 50upx;
	width: 150upx;
	background: #0ac6ff;
	border-right: 0upx;
	border-color: #0ac6ff;
	border-radius: 10upx;
	display: Flex1;
}
</style>
